<template>
  <div>
    <h3>枪支管理</h3>
    <div class="container">
      <el-card>
        <h3>机构许可</h3>
        <vxe-table resizable show-overflow border max-height="300" stripe highlight-hover-row highlight-current-row :cell-style="cellStyle" :data="orgLicenseData">
          <vxe-table-column field="org" title="机构" sortable></vxe-table-column>
          <vxe-table-column field="licenseNum" title="许可证号" sortable></vxe-table-column>
          <vxe-table-column field="licenseScope" title="开设项目" sortable></vxe-table-column>
          <vxe-table-column field="beginDate" title="生效日期" sortable></vxe-table-column>
          <vxe-table-column field="endDate" title="截止日期" sortable></vxe-table-column>
          <vxe-table-column field="become" title="到期时间/天" sortable></vxe-table-column>
          <vxe-table-column field="memo" title="备注" sortable></vxe-table-column>
          <vxe-table-column field="" title="操作" width="60">
            <template #default="{ row }">
              <el-button @click="editOrgLicense(row)" type="success" size="medium" icon="el-icon-edit" circle></el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>

      <h3 style="margin-top: 20px;">枪支许可</h3>
      <vxe-toolbar>
        <template #buttons>
          <el-row type="flex" :gutter="10" justify="space-between">
            <el-col :span="5" style="display: flex;">
              <el-button type="success" icon="el-icon-plus" size="mini" @click="insertEvent">新增</el-button>
              <el-button type="success" icon="el-icon-download" size="mini" @click="exportData">导出</el-button>
              <el-button type="success" icon="el-icon-printer" size="mini" @click="printEvent">打印</el-button>
            </el-col>
            <el-col :span="5">
              <el-select v-model="searchForm.typeId" size="small" collapse-tags filterable clearable placeholder="选择枪支类型">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_type" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-select v-model="searchForm.brandId" size="small" collapse-tags filterable clearable placeholder="选择品牌型号">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_brand" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-input size="small" v-model="searchForm.user" placeholder="输入使用人" style="width:200px"></el-input>
            </el-col>
            <el-col :span="5" style="display: flex;">
              <el-button type="success" size="small" icon="el-icon-s-promotion" @click="searchSubmit"
                style="margin: 0 10px;">
                搜索</el-button>
              <vxe-button @click="clearTableFilter" status="warning" icon="el-icon-refresh-right"> 清空</vxe-button>
            </el-col>
            <el-col :span="4">
              <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索"
                @input="searchEvent"></vxe-input>
            </el-col>
          </el-row>
        </template>
      </vxe-toolbar>
      <vxe-table resizable ref="XTable" show-overflow border max-height="800" stripe highlight-hover-row highlight-current-row :cell-style="cellStyle"
        :loading="loading" :data="dataList" @sort-change="sortChange">
        <vxe-table-column field="type" title="枪支类型" sortable></vxe-table-column>
        <vxe-table-column field="brand" title="品牌型号" sortable></vxe-table-column>
        <vxe-table-column field="gunNumber" title="枪号" sortable></vxe-table-column>
        <vxe-table-column field="user" title="使用人" sortable></vxe-table-column>
        <vxe-table-column field="store" title="存放位置" sortable></vxe-table-column>
        <vxe-table-column field="purchaseYear" title="购置年份" sortable></vxe-table-column>
        <vxe-table-column field="license" title="持枪证号" sortable></vxe-table-column>
        <vxe-table-column field="openDate" title="发证日期" sortable></vxe-table-column>
        <vxe-table-column field="closeDate" title="截止日期" sortable></vxe-table-column>
        <vxe-table-column field="become" title="到期时间/天" sortable></vxe-table-column>
        <vxe-table-column field="memo" title="备注" sortable></vxe-table-column>
        <vxe-table-column field="" title="操作" width="110">
          <template #default="{ row,rowIndex }">
            <el-button @click="editEvent(row,rowIndex)" type="success" size="medium" icon="el-icon-edit" circle></el-button>
            <el-button @click="deleteEvent(row)" type="danger" size="medium" icon="el-icon-delete" circle></el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager>
    </div>
    <vxe-modal v-model="insertModal" :title="isInsert?'新增记录':'修改记录'">
      <template #default>
        <el-form ref="insertForm" :rules="rules" :model="insertForm" inline-message label-width="110px">
          <el-form-item label="枪支类型" prop="typeId">
            <el-select v-model="insertForm.typeId" size="small" collapse-tags filterable clearable placeholder="请选择">
              <el-option :label="item" :value="key" v-for="(item,key,index) in dict_type" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌型号" prop="brandId">
            <el-select v-model="insertForm.brandId" size="small" collapse-tags filterable clearable placeholder="请选择">
              <el-option :label="dict_brand[item]" :value="item" v-for="(item,index) in Object.keys(dict_brand).reverse()" :key="index"></el-option>
            </el-select>
            <el-link v-if="!brandIdInsertShow" @click="brandIdInsertShow=true" style="font-size: 80%;" icon="el-icon-plus" type="success">点击新增</el-link>
            <el-input v-else style="margin-top: 10px;width: 200px;" placeholder="请输入品牌型号" size="small" v-model="brandName" class="input-with-select">
              <el-button @click="brandIdInsert" slot="append" icon="iconfont icon-save"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="枪号" prop="gunNumber">
            <el-input size="small" v-model="insertForm.gunNumber" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="使用人" prop="user">
            <el-input size="small" v-model="insertForm.user" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="存放位置" prop="storeId">
            <el-select v-model="insertForm.storeId" size="small" collapse-tags filterable clearable placeholder="请选择">
              <el-option :label="dict_store[item]" :value="item" v-for="(item,index) in Object.keys(dict_store).reverse()" :key="index"></el-option>
            </el-select>
            <el-link v-if="!storeIdInsertShow" @click="storeIdInsertShow=true" style="font-size: 80%;" icon="el-icon-plus" type="success">点击新增</el-link>
            <el-input v-else style="margin-top: 10px;width: 200px;" placeholder="请输入存放位置" size="small" v-model="storeName" class="input-with-select">
              <el-button @click="storeIdInsert" slot="append" icon="iconfont icon-save"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="购置年份" prop="purchaseYear">
            <el-date-picker size="small" v-model="insertForm.purchaseYear" type="year" style="width:200px" placeholder="选择年份"> </el-date-picker>
          </el-form-item>
          <el-form-item label="持枪证号" prop="license">
            <el-input size="small" v-model="insertForm.license" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="发证日期" prop="openDate">
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="insertForm.openDate" style="width: 200px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="截止日期" prop="closeDate">
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="insertForm.closeDate" style="width: 200px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input size="small" v-model="insertForm.memo" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" size="small" @click="insertModal = false">取消</el-button>
            <el-button type="success" size="small" icon="el-icon-s-promotion" @click="insertSave">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </vxe-modal>
    <vxe-modal v-model="orgLicenseModal" title="修改记录">
      <template #default>
        <el-form ref="orgLicenseForm" :model="orgLicenseForm" inline-message label-width="110px">
          <el-form-item label="许可证号" prop="licenseNum">
            <el-input size="small" v-model="orgLicenseForm.licenseNum" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="开设项目" prop="licenseScope">
            <el-input size="small" v-model="orgLicenseForm.licenseScope" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="生效日期" prop="beginDate">
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="orgLicenseForm.beginDate" style="width: 200px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="截止日期" prop="endDate">
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="orgLicenseForm.endDate" style="width: 200px;"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input size="small" v-model="orgLicenseForm.memo" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" size="small" @click="orgLicenseModal = false">取消</el-button>
            <el-button type="success" size="small" icon="el-icon-s-promotion" @click="orgLicenseSave">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import {gun_type,json4OrgGunLicense,gun_brand,gun_store} from '@/api/dict.js'
  import {gun_all,gun_select,gun_insert,gun_update,gun_delete,orgLicenseSelect,orgLicenseUpdate,gun_brand_insert,gun_store_insert} from '@/api/organization.js'
  export default {
    data() {
      return {
        defaultDataList: [],
        dataList: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        loading: false,
        filterName: '',
        insertModal: false,
        isInsert: true,
        dict_type: {},
        dict_org: {},
        dict_brand: {},
        dict_store: {},
        dict_regulationDepartment: {},
        searchForm: {
          typeId: '',
          brandId: '',
          user: '',
        },
        insertForm: {
          typeId: '',
          brandId: '',
          gunNumber: '',
          user: '',
          storeId: '',
          purchaseYear: '',
          license: '',
          openDate: '',
          closeDate: '',
          memo: '',
        },
        rules: {
          typeId: [{
            required: true,
            message: '这是必填项',
            trigger: 'blur'
          }, ],
        },
        gunId: '',
        orgLicenseData: [],
        orgLicenseModal: false,
        orgLicenseForm: {
          licenseNum: '',
          licenseScope: '',
          beginDate: '',
          endDate: '',
          memo: ''
        },
        brandIdInsertShow: false,
        brandName: '',
        storeIdInsertShow: false,
        storeName: '',
        search: false,
        currentIndex: null,
      }
    },
    created() {
      this.init_dict().then(()=>{
        this.getGroundAll()
        this.getOrgLicenseSelect()
      })
    },
    watch: {
      filterName(val) {
    	if(!val){
    	  this.page = {
    	  currentPage: 1,
    	  pageSize: 10,
    	  totalResult: 0,
    	  }
    	  this.search = false
    	  this.findList()
    	}
      }
    },
    methods: {
      storeIdInsert() {
        gun_store_insert({name:this.storeName}).then(res=>{
          if(res.code == 200){
            gun_store().then(res=>{
              this.dict_store = res
            })
            this.$message.success('新增成功')
          }
          this.storeIdInsertShow = false
        })
      },
      brandIdInsert() {
        gun_brand_insert({name:this.brandName}).then(res=>{
          if(res.code == 200){
            gun_brand().then(res=>{
              this.dict_brand = res
            })
            this.$message.success('新增成功')
          }
          this.brandIdInsertShow = false
        })
      },
      orgLicenseSave() {
        let data = {}
        if(this.orgLicenseForm.licenseNum) data.licenseNum = this.orgLicenseForm.licenseNum
        if(this.orgLicenseForm.licenseScope) data.licenseScope = this.orgLicenseForm.licenseScope
        if(this.orgLicenseForm.beginDate) data.beginDate = this.$moment(this.orgLicenseForm.beginDate).format('YYYY-MM-DD') + ' 00:00:00'
        if(this.orgLicenseForm.endDate) data.endDate = this.$moment(this.orgLicenseForm.endDate).format('YYYY-MM-DD') + ' 00:00:00'
        if(this.orgLicenseForm.memo) data.memo = this.orgLicenseForm.memo
        orgLicenseUpdate(data).then(res=>{
          if(res.code === 200) {
            this.$message.success('修改成功！')
            this.getOrgLicenseSelect()
            this.orgLicenseModal = false
          }else{
            this.$message.error(res.message)
          }
        })
      },
      editOrgLicense(row) {
        this.orgLicenseForm.licenseNum = row.licenseNum
        this.orgLicenseForm.licenseScope = row.licenseScope
        this.orgLicenseForm.beginDate = this.$moment(row.beginDate).format('YYYY-MM-DD')=='Invalid date'?'':row.beginDate
        this.orgLicenseForm.endDate = this.$moment(row.endDate).format('YYYY-MM-DD')=='Invalid date'?'':row.endDate
        this.orgLicenseForm.memo = row.memo
        this.orgLicenseModal = true
      },
      deleteEvent(row) {
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          gun_delete({
            gunId: row.gunId
          }).then(res => {
            if (res.code === 200) {
              this.defaultDataList.forEach((item,index)=>{
              	if(item.gunId == row.gunId){
              	  this.defaultDataList.splice(index,1)
              	}
              })
              this.init_data(this.defaultDataList)
              this.findList()
              this.$message.success('删除成功！')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editEvent(row,rowIndex) {
        this.currentIndex = rowIndex
        this.insertForm.typeId = row.typeId==0?'':row.typeId+''
        this.insertForm.brandId = row.brandId==0?'':row.brandId+''
        this.insertForm.gunNumber = row.gunNumber
        this.insertForm.user = row.user
        this.insertForm.storeId = row.storeId==0?'':row.storeId+''
        this.insertForm.purchaseYear = row.purchaseYear+''
        this.insertForm.license = ''
        this.insertForm.openDate = this.$moment(row.openDate).format('YYYY-MM-DD')=='Invalid date'?'':row.openDate
        this.insertForm.closeDate = this.$moment(row.closeDate).format('YYYY-MM-DD')=='Invalid date'?'':row.closeDate
        this.insertForm.memo = row.memo
        this.insertModal = true
        this.isInsert = false
        this.gunId = row.gunId
      },
      searchSubmit() {
        let data = {}
        if(this.searchForm.typeId) data.typeId = this.searchForm.typeId
        if(this.searchForm.brandId) data.brandId = this.searchForm.brandId
        if(this.searchForm.user) data.user = this.searchForm.user
        gun_select(data).then(res=>{
          if(res.code === 200 && res.data.length!=0) {
            this.page = {
              currentPage: 1,
              pageSize: 10,
              totalResult: 0
            }
            this.init_data(res.data)
          }else{
            this.defaultDataList = []
          }
        }).then(()=>{
          this.findList()
        })
      },
      clearTableFilter() {
        this.searchForm = {
          typeId: '',
          brandId: '',
          user: '',
        }
        this.getGroundAll()
      },
      insertSave() {
        this.$refs.insertForm.validate((valid) => {
          if(valid) {
            let data = {}
            if(this.insertForm.typeId) data.typeId = this.insertForm.typeId
            if(this.insertForm.brandId) data.brandId = this.insertForm.brandId
            if(this.insertForm.gunNumber) data.gunNumber = this.insertForm.gunNumber
            if(this.insertForm.user) data.user = this.insertForm.user
            if(this.insertForm.storeId) data.storeId = this.insertForm.storeId
            if(this.insertForm.purchaseYear) data.purchaseYear = this.$moment(this.insertForm.purchaseYear).format('YYYY')
            if(this.insertForm.license) data.license = this.insertForm.license
            if(this.insertForm.openDate&&this.$moment(this.insertForm.openDate).format('YYYY-MM-DD')!='Invalid date') data.openDate = this.$moment(this.insertForm.openDate).format('YYYY-MM-DD')+' 00:00:00'
            if(this.insertForm.closeDate&&this.$moment(this.insertForm.closeDate).format('YYYY-MM-DD')!='Invalid date') data.closeDate = this.$moment(this.insertForm.closeDate).format('YYYY-MM-DD')+' 00:00:00'
            if(this.insertForm.memo) data.memo = this.insertForm.memo
            if(this.isInsert) {
              gun_insert(data).then(res=>{
                if(res.code === 200) {
                  this.insertSuccess = true
                  this.dataList.unshift(res.data)
                  this.defaultDataList.push(res.data)
                  this.init_data(this.defaultDataList)
                  this.page.totalResult+=1
                  this.$refs.XTable.setCurrentRow(this.dataList[0])
                  this.$message.success('添加成功！')
                  this.insertModal = false
                }else{
                  this.$message.error(res.message)
                }
              })
            }else{
              data.gunId = this.gunId
              gun_update(data).then(res=>{
                if(res.code === 200) {
                  Object.assign(this.dataList[this.currentIndex],res.data)
                  this.defaultDataList.forEach(item=>{
                  	if(res.data.gunId==item.gunId){
                  	  Object.assign(item,res.data)
                  	}
                  })
                  this.init_data(this.defaultDataList)
                  this.$message.success('修改成功！')
                  this.insertModal = false
                }else{
                  this.$message.error(res.message)
                }
              })
            }
          }else{
            return false
          }
        })
      },
      insertEvent() {
        this.insertForm = {
          typeId: '',
          brandId: '',
          gunNumber: '',
          user: '',
          brandId: '',
          purchaseYear: '',
          license: '',
          openDate: '',
          closeDate: '',
          memo: '',
        }
        this.insertModal = true
        this.isInsert = true
      },
      exportData() {
        this.$refs.XTable.exportData({
          filename: this.$route.meta.title, type: 'csv',
          data: this.search?this.dataList:this.defaultDataList
        })
      },
      printEvent() {
        let topHtml = '<h2>枪支管理</h2>'
        this.searchEvent()
        setTimeout(() => {
          this.$refs.XTable.print({
            sheetName: '枪支管理',
            beforePrintMethod: ({
              content
            }) => {
              return topHtml + content
            }
          })
        }, 1000)
      },
      getOrgLicenseSelect() {
        orgLicenseSelect().then(res=>{
          if(res.code === 200 && res.data.length!=0){
            res.data.forEach(item=>{
              item.org = this.dict_org[item.orgId]
              if(!item.licenseNum) item.licenseNum = '请及时到相关部门办理合法资质'
              if(item.beginDate){
                item.beginDate = this.$moment(item.beginDate).format('YYYY-MM-DD')
              }else{
                item.beginDate = '请准确记录 生效日期'
              }
              if(item.endDate){
                item.endDate = this.$moment(item.endDate).format('YYYY-MM-DD')
                let now = this.$moment().format("YYYY-MM-DD")
                let flag = this.$moment(item.endDate).format("YYYY-MM-DD")
                let days = this.getDays(now, flag)
                if (days <= 0) {
                    item.style = 'red'
                    item.become = days + "(天)-该枪支持枪证已过期，请及时到相关机构办理相应手续"
                }else if (days > 0 && days <= 100) {
                  item.style = 'orange'
                    item.become = days + "(天)-该枪支持枪证临近有效期，请及时到相关机构办理相应手续"
                }else{
                  item.become = days
                }
              }else{
                item.endDate = '请准确记录 截止日期'
              }
            })
            this.orgLicenseData = res.data
          }else{
            this.orgLicenseData = []
          }
        })
      },
      getGroundAll() {
        gun_all().then(res=>{
          if (res.code === 200 && res.data.length != 0) {
              this.init_data(res.data)
            } else {
              this.defaultDataList = []
            }
          }).then(() => {
            this.findList()
          })
      },
      cellStyle({ row, rowIndex, column }) {
        if(column.property == 'become'){
          if(row.style=='red'){
            return {
              backgroundColor: '#DC143C',
              color: '#ffffff'
            }
          }else if(row.style=='orange'){
            return {
              backgroundColor: 'orange',
              color: '#ffffff'
            }
          }
        }
      },
      init_data(data) {
        if(data.length==0) return
        data.forEach(item=>{
          item.brand = this.dict_brand[item.brandId]
          item.store = this.dict_store[item.storeId]
          item.type = this.dict_type[item.typeId]
          item.purchaseYear = item.purchaseYear==0?'':item.purchaseYear
          if(!item.license) {
            item.license = '该枪支如果尚未办理持枪证，请及时到相关部门办理合法资质'
          }
          if(item.openDate){
            item.openDate = this.$moment(item.openDate).format('YYYY-MM-DD')
          }else{
            item.openDate = '请准确记录持枪证 发证日期'
          }
          if(item.closeDate){
            item.closeDate = this.$moment(item.closeDate).format('YYYY-MM-DD')
            let now = this.$moment().format("YYYY-MM-DD")
            let flag = this.$moment(item.closeDate).format("YYYY-MM-DD")
            let days = this.getDays(now, flag)
            if (days <= 0) {
                item.style = 'red'
                item.become = days + "(天)-该枪支持枪证已过期，请及时到相关机构办理相应手续"
            }else if (days > 0 && days <= 100) {
              item.style = 'orange'
                item.become = days + "(天)-该枪支持枪证临近有效期，请及时到相关机构办理相应手续"
            }else{
              item.become = days
            }
          }else{
            item.closeDate = '请准确记录持枪证 截至日期'
            item.become = '未记录'
            item.style = 'red'
          }
        })
        this.searchProps = Object.keys(data[0])
        this.defaultDataList = data
      },
      getDays(date1, date2) {
        //将日期字符串分隔为数组,数组元素分别为年.月.日
        var date1Str = date1.split("-");
        //根据年月日的值创建Date对象
        var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
        var date2Str = date2.split("-");
        var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
        var t1 = date1Obj.getTime();
        var t2 = date2Obj.getTime();
        //每一天的毫秒数
        var dateTime = 1000 * 60 * 60 * 24;
        //计算出两个日期的天数差
        var minusDays = Math.floor(((t2 - t1) / dateTime));
        //取绝对值
        return minusDays;
      },
      init_dict() {
        return new Promise((resolve,reject)=>{
          json4OrgGunLicense().then(res=>{
            this.dict_org = res
          })
          gun_brand().then(res=>{
            this.dict_brand = res
          })
          gun_store().then(res=>{
            this.dict_store = res
          })
          gun_type().then(res=>{
            this.dict_type = res
            resolve()
          })
        })
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = filterName
          const searchProps = this.searchProps
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
          this.page = {
          	currentPage: 1,
          	pageSize: this.dataList.length,
          	totalResult: this.dataList.length
          }
          this.search = true
        } else {
          this.dataList = this.defaultDataList
     }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
      	if(!this.search){
          this.page.currentPage = 1
      	  this.page.pageSize = this.defaultDataList.length
      	  this.findList()
      	}else{
      	  this.page.pageSize = this.dataList.length
      	}
      },
      findList() {
        this.loading = true
        setTimeout(() => {
          if(this.insertSuccess){
            this.page.totalResult = this.defaultDataList.length
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
            this.$refs.XTable.setCurrentRow(this.dataList[0])
            this.insertSuccess = false
          }else{
            this.page.totalResult = this.defaultDataList.length
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
          }
          this.loading = false
        }, 300)
      },
    }
  }
</script>

<style lang="scss" scoped>
.container{
  background-color: #FFFFFF;
  padding: 10px;
}
</style>
